<template>
  <div>
    <div class="imgBox">
      <van-swipe :autoplay="3000" lazy-render ref="swipe" class="my-swipe">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="margin-bottom: 60px">
      <div class="active" style="margin-top: 10px">
        <p class="titTxt">{{ data.goodsName }}</p>
        <p style="color: #6f6e6e; margin-top: 5px">
          {{ data.sellingPoint }}
        </p>
        <p style="color: #ee0a24; margin-top: 10px">
          ￥<span style="font-size: 20px; color: #ee0a24">
            {{ data.startSellingPrice }}
          </span>
        </p>

        <div class="txtBtm">
          <p>
            限购数量: {{ data.limitBuyAmount == 0 ? "-" : data.limitBuyAmount }}
          </p>
          <p style="text-align: center">库存:{{ data.totalStockNum }}</p>
          <p style="text-align: end">销量:{{ data.soldAmount }}</p>
        </div>
      </div>
      <div class="shopTxt">
        <van-icon name="shop-o" size="20px" style="margin-right: 10px" />
        <span>{{ data.networkName }}</span>
      </div>

      <div class="active">
        <div class="selectTxt" @click="handleClick">
          <p>选择</p>
          <div class="txtleft">
            <p v-if="txtName == ''">请选择</p>
            <p v-else>已选：{{ txtName }}</p>
          </div>
          <van-icon name="arrow" class="iconRight" />
        </div>
        <!-- <div class="selectTxt" @click="show = true">
          <p>送至</p>
          <div class="txtleft">
            <p class="arrtxt">
              <van-icon name="location-o" class="iconAdd" />
              {{ address }}
              江苏省南京市鼓楼区
            </p>
          </div>
          <van-icon name="arrow" class="iconRight" />
        </div> -->
        <div class="selectTxt" v-if="data.goodsType == 2">
          <p>秒杀</p>
          <div v-if="!activity">
            <div class="txtleft">
              <p class="arrtxt" v-if="!btnStatus">
                距离活动结束还剩 {{ timer }}
              </p>
              <p class="arrtxt" v-else>活动已结束</p>
            </div>
          </div>

          <div v-else>
            <div class="txtleft">
              <p class="arrtxt">距离活动开始还剩 {{ timer }}</p>
            </div>
          </div>
        </div>
        <div v-else-if="data.presaleDeliveryTime" class="selectTxt">
          <p>预售</p>
          <div class="txtleft">
            <p class="arrtxt">预售发货时间： {{ data.presaleDeliveryTime }}</p>
          </div>
        </div>
        <!-- <div class="selectTxt">
          <p>运费</p>
          <div class="txtleft">
            <p class="arrtxt">免运费（请以提交订单时为准)</p>
          </div>
        </div> -->
      </div>

      <div class="active" style="border-top: 6px solid #f0f0f0">
        <div
          class="txtTop"
          @click="handleDeail"
          style="border-bottom: 1px solid #f0f0f0; position: relative"
        >
          评价
          <span>({{ totalNum }})</span>
          <van-icon style="top: 13px" name="arrow" class="iconRight" />
        </div>

        <div class="rateaBox" v-if="rateData">
          <div class="item" v-for="(item, i) in rateData" :key="i">
            <div class="buyer-msg">
              <div class="img">
                <img
                  src="https://pc.njyima.com/_nuxt/img/buyer-img.a93d972.png"
                  alt=""
                />
              </div>
              <div class="name">{{ item.commentUserName }}</div>
              <div class="dayData">{{ item.commentTime }}</div>
            </div>
            <div class="star">
              <van-rate v-model="item.descMatchRating" size="16" readonly />
              <span style="margin-left: 15px"
                >{{ item.goodsName }}{{ item.specName }}</span
              >
            </div>
            <div class="text">
              {{ item.commentContent || "暂无评价" }}
            </div>
          </div>
        </div>
        <p v-else style="color: #999">暂无评价</p>
        <!-- <div v-for="(item, i) in rateData" :key="i"></div> -->
      </div>

      <div class="active" style="border-top: 6px solid #f0f0f0">
        <p class="txtTop">详情</p>
        <div v-for="(item, i) in detailImg" :key="i">
          <img
            :src="item"
            style="max-width:100% !important;table-layout:fixed;word-wrap:break-word;word-break;break-word;width:100% !important;height:auto !important;margin:0;display:flex;"
          />
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        @click="$refs.myCarRef.openMyCar()"
        text="购物车"
        :badge="carDishNum"
      />
      <van-goods-action-icon
        v-if="data.isFav == 0"
        icon="star-o"
        text="收藏"
        @click="handleTuck"
      />
      <van-goods-action-icon
        v-if="data.isFav == 1"
        icon="star"
        text="已收藏"
        color="#ff5000"
        @click="handleCancel"
      />

      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="handleAdd"
        :disabled="btnShow"
      />
      <van-goods-action-button
        @click="handleBuy"
        type="danger"
        text="立即购买"
        :disabled="btnShow"
      />
    </van-goods-action>
    <van-sku
      ref="vanSku"
      v-model="showBase"
      :sku="skuData.sku"
      :goods="skuData.goods_info"
      :goods-id="skuData.goods_id"
      :hide-stock="skuData.sku.hide_stock"
      :quota="skuData.quota"
      :quota-used="skuData.quota_used"
      :initial-sku="skuData.initialSku"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      @sku-selected="onSelected"
    >
      <!-- 自定义 sku actions -->
      <template #sku-actions="props">
        <div class="van-sku-actions">
          <van-button
            square
            size="large"
            type="warning"
            :disabled="btnShow"
            @click="props.skuEventBus.$emit('sku:addCart')"
          >
            加入购物车
          </van-button>
          <van-button
            square
            size="large"
            type="danger"
            :disabled="btnShow"
            @click="props.skuEventBus.$emit('sku:buy')"
          >
            立即购买
          </van-button>
        </div>
      </template>
    </van-sku>

    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <div class="van-header">
        <div class="left">
          <!-- 新增返回列表页 -->
          <van-icon name="arrow-left" size="16" @click="show = false" />
        </div>
        <div class="middle">
          <span class="label">配送至</span>
        </div>
      </div>
      <div class="content">
        <div>
          <p class="txtPs">当前配送至</p>
          <van-cell icon="location-o" :value="address" />
          <p class="txtPs">从我的收货地址选择</p>
        </div>
        <div>
          <div
            class="indexBox"
            v-for="item in showList"
            :key="item.addrId"
            @click="handleAddr(item)"
          >
            <div style="display: flex">
              <span>{{ item.name }}</span>
              <span style="text-align: right; flex: 1">{{ item.tel }}</span>
            </div>
            <div style="padding: 8px 0">
              {{ item.address }}
            </div>
          </div>
          <!-- 无数据 -->
          <van-empty
            v-if="isEmpty"
            class="custom-image"
            :image="require('@/assets/images/empty.png')"
            description="暂无收获地址"
          />
        </div>
      </div>
    </van-popup>
    <!-- 购物车 -->
    <myCar @refresh="handleRefresh" ref="myCarRef" />
    <order @refresh="handleRefresh" ref="orderRef" />
    <full-loading v-if="loading"></full-loading>
    <!-- 评价 -->
    <fullscreenModal
      :modal="fullscreenModal"
      label="商品评价"
      :showSave="false"
      editType="other"
      @handleClose="fullscreenModal = false"
    >
      <rateDeail @close="fullscreenModal = false" ref="rateRef" />
    </fullscreenModal>
  </div>
</template>

<script>
import {
  geCarNum,
  addCart,
  goodSave,
  goodDelFav,
  queryGoods,
} from "@/api/srvAssurance/shoppingMall/markeApi";
import { getQuery } from "@api/platframe/mainFrame/address";
import { goodsPage } from "@/api/srvAssurance/shoppingMall/appraise";
import { queryFileList } from "@/api/common";
import rateDeail from "./goodsRate";
import Order from "../goodsList/order";
import myCar from "./myCar";
export default {
  components: { myCar, Order, rateDeail },
  data() {
    return {
      loading: false,
      showBase: false,
      show: false,
      closeOnClickOverlay: true,
      fullscreenModal: false,
      isEmpty: false,

      activity: false,
      btnStatus: false,
      btnShow: false,
      minuteOut: null,
      skuData: {
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [],
          // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
          list: [],
          none_sku: false, // 是否无规格商品
          hide_stock: false, // 是否隐藏剩余库存
        },
        goods_info: {
          picture: "",
        },
      },
      customSkuValidator: () => "请选择商品规格!",
      goodsId: "",
      data: "",
      txtName: "",
      images: [],
      detailImg: [],
      showList: [],
      rateData: [],
      totalNum: 0, // 总条数
      carDishNum: 0,
      fileUrlObj: {},

      attrData: [],
      selectedData: "",
      address: "",
      timer: "",

      minuteOut: null,
    };
  },
  watch: {
    images(val) {
      var _this = this;
      setTimeout(() => {
        _this.$refs.swipe.resize();
      }, 500);
    },
  },
  computed: {
    userInfo() {
      return (
        this.$store.state.userInfo || {
          userId: "53E33C3A2D0B4E98917487B92E2586D6",
        }
      );
    },
  },
  methods: {
    getData(goodsId) {
      this.goodsId = goodsId;
      setTimeout(() => {
        this.$refs.swipe.resize();
      }, 500);
      this.getSearch();
      this.getQuery();
      this.commentGet();
      this.getCarNumByLoginUserData();
      this.selectedData = "";
      this.attrData = [];
    },
    getSearch() {
      this.loading = true;
      queryGoods(this.goodsId).then((res) => {
        if (res.code == 1000) {
          this.data = res.data;
          this.queryAttr(res.data);
          this.queryFileCode(res.data);
          setTimeout(() => {
            this.handleSku(res.data);
          }, 400);

          clearInterval(this.minuteOut);
          if (res.data.goodsType == "2") {
            // 执行倒计时
            this.minuteOut = setInterval(() => {
              this.getWeekday(
                res.data.seckillStartTime,
                res.data.seckillEndTime
              );
            }, 1000);
          }

          var dateEnd = new Date().format("yyyy-MM-dd hh:mm:ss");
          if (
            dateEnd < res.data.seckillStartTime ||
            dateEnd > res.data.seckillEndTime
          ) {
            this.btnShow = true;
          }
        }
      });
    },
    // 进入页面展示默认规格
    queryAttr(data) {
      let space = data.goodsSpecs[0].goodsSpecAttrs;
      let fileCodeArr = [];
      space.forEach((item, i) => {
        if (item.fileCode && !this.fileUrlObj[item.fileCode]) {
          fileCodeArr.push(item.fileCode);
          this.fileUrlObj[item.fileCode] = "";
        }
      });
      if (fileCodeArr.length) {
        queryFileList(fileCodeArr).then((res) => {
          this.attrUrl = [];
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.url;
            });
            this.$forceUpdate();
          }
        });
      }
    },
    // 查询购物车数量
    getCarNumByLoginUserData() {
      geCarNum().then((res) => {
        if (res.code === 1000 && res.data) {
          this.carDishNum = res.data;
        }
      });
    },
    commentGet() {
      this.rateData = [];
      let data = {
        goodsId: this.goodsId,
        pageNum: 1,
        pageSize: 20,
      };
      goodsPage(data).then((res) => {
        if (res.code == 1000 && res.data) {
          this.totalNum = res.data.total;
          let arr = [];
          if (res.data.records) {
            if (res.data.records[0]) {
              arr.push(res.data.records[0]);
            }
            if (res.data.records[1]) {
              arr.push(res.data.records[1]);
            }
            res.data.records.forEach((val, i) => {
              val.descMatchRating = Number(val.descMatchRating);
            });
          }
          this.rateData = arr;
        }
      });
    },
    // 图片解析
    queryFileCode(data) {
      if (data.goodsVideoFileCode) {
        queryFileList([data.goodsVideoFileCode]).then((res) => {
          this.videoUrl = [];
          if (res.code === 1000 && res.data) {
            this.videoUrl = res.data[0].url;
            this.$forceUpdate();
          }
        });
      }
      if (data.goodsPicFileCodes) {
        queryFileList(data.goodsPicFileCodes).then((res) => {
          this.images = [];
          if (res.code === 1000 && res.data) {
            res.data.forEach((item, i) => {
              this.images.push(item.url);
            });
            this.$forceUpdate();
          }
        });
      }
      if (data.goodsDetailPicFileCodes) {
        queryFileList(data.goodsDetailPicFileCodes).then((res) => {
          this.detailImg = [];
          if (res.code === 1000 && res.data) {
            res.data.forEach((item, i) => {
              this.detailImg.push(item.url);
            });
            this.$forceUpdate();
          }
        });
      }
      setTimeout(() => {
        this.loading = false;
      }, 400);
    },
    handleSku(data) {
      let div = data.goodsSpecs;
      let span = data.goodsSpecDetails;
      let tree = [];
      let list = [];

      div.forEach((item) => {
        item.goodsSpecAttrs.forEach((val) => {
          this.attrData.push({
            id: val.attrId,
            name: val.attrName,
            imgUrl: this.fileUrlObj[val.fileCode] || this.images[0],
          });
        });

        tree.push({
          k: item.specName,
          k_id: item.specId,
          v: this.attrData,
          k_s: "s1",
          count: 1,
        });
      });

      // 规格明细
      span.forEach((item, i) => {
        list.push({
          id: item.specDetailId,
          price: item.sellingPrice * 100,
          discount: item.originalPrice,
          goods_id: item.goodsId,
          stock_num: item.stockNum, //库存
          volume: item.volume,
          weight: item.weight,
          attrValues: item.attrValues,
          attrValueArr: item.attrValueArr,
          s1: this.attrData[i].id,
          ableStatus: item.ableStatus,
        });
      });

      this.skuData = {
        sku: {
          tree: tree,
          list: list,
          price: data.startSellingPrice,
          stock_num: data.totalStockNum, // 商品总库存
          none_sku: false, // 是否无规格商品
          hide_stock: false, // 是否隐藏剩余库存
        },
        goods_id: data.goodsId,
        quota: data.limitBuyAmount, //限购数量
        quota_used: data.buyedAmount, //已经购买过的数量
        goods_info: {
          title: "测试商品A",
          picture: this.images[0],
        },
        initialSku: {
          s1: this.attrData[0].id,
          selectedNum: 1,
        },
      };
    },

    // 选择规格
    handleClick() {
      this.showBase = true;
    },

    // 规格值改变时
    onSelected(data) {
      this.txtName = data.skuValue.name;
      data.selectedSkuComb.specDetailId = data.selectedSkuComb.id;
      if (data.selectedSkuComb) {
        this.selectedData = {
          ...data.selectedSkuComb,
          ...data.skuValue,
          attrNames: data.skuValue.name,
          goodsName: this.data.goodsName,
          addAmount: 1,
          networkId: this.data.networkId,
          networkName: this.data.networkName,
          addSellingPrice: data.selectedSkuComb.price / 100,
        };
      }
    },

    handleDeail() {
      this.fullscreenModal = true;
      this.$refs.rateRef.getData(this.goodsId);
    },

    handleBuy() {
      if (!this.selectedData) {
        this.$Notify({ type: "warning", message: "请先选择商品规格！" });
        return;
      }

      let data = [
        {
          networkId: this.selectedData.networkId,
          networkName: this.selectedData.networkName,
          newArr: [this.selectedData],
        },
      ];
      this.$refs.orderRef.resetForm();
      this.$refs.orderRef.openMyCar(data, 1);
    },

    handleAdd() {
      if (this.selectedData.ableStatus == 0) {
        this.$Notify({ type: "warning", message: "当前商品规格已禁用！" });
        return;
      }

      if (!this.selectedData) {
        this.$Notify({ type: "warning", message: "请先选择商品规格！" });
        return;
      }
      let item = {
        addAmount: 1,
        addSellingPrice: this.selectedData.price / 100,
        goodsId: this.selectedData.goods_id,
        networkId: this.data.networkId,
        specDetailId: this.selectedData.specDetailId,
      };
      addCart(item).then((res) => {
        if (res.code == 1000) {
          this.$Notify({ type: "success", message: "成功加入购物车！" });
          this.showBase = false;
          this.getCarNumByLoginUserData();
        }
      });
    },
    // 刷新页面
    handleRefresh() {
      this.$emit("close");
      this.$emit("refresh");
      this.getCarNumByLoginUserData();
      this.$refs.myCarRef.getCarData();
    },

    // 获取地址数据
    async getQuery() {
      this.showList = [];
      let obj = { staffId: this.userInfo.userId };

      let res = await getQuery(obj);
      if (res && res.code === 1000) {
        // 处理显示数据
        this.resData = res.data;
        if (res.data.length > 0) {
          this.isEmpty = false;
          let arr = [];
          res.data.map((item) => {
            let address =
              item.provName + item.cityName + item.countyName + item.detailAddr;
            arr.push({
              id: item.addrId,
              name: item.receiver,
              tel: item.receiverContact,
              address: address,
              isDefault: item.isDefault,
            });

            if (item.isDefault == "1") {
              this.address = address;
            }
          });
          this.showList = arr;
        } else {
          this.showList = [];
          this.isEmpty = true;
        }
      }
    },
    //规格加入购物车
    onAddCartClicked(data) {
      let div = data.selectedSkuComb;

      let item = {
        addAmount: data.selectedNum,
        addSellingPrice: div.price / 100,
        goodsId: div.goods_id,
        networkId: this.data.networkId,
        specDetailId: div.specDetailId,
      };

      if (div.ableStatus == 0) {
        this.$Notify({ type: "warning", message: "当前商品规格已禁用！" });
        return;
      }

      addCart(item).then((res) => {
        if (res.code == 1000) {
          this.$Notify({ type: "success", message: "成功加入购物车！" });
          this.showBase = false;
          this.getCarNumByLoginUserData();
        }
      });
    },
    //规格立即购买
    onBuyClicked(item) {
      if (this.selectedData.ableStatus == 0) {
        this.$Notify({ type: "warning", message: "当前商品规格已禁用！" });
        return;
      }
      this.selectedData.addAmount = item.selectedNum;
      let data = [
        {
          networkId: this.data.networkId,
          networkName: this.data.networkName,
          newArr: [this.selectedData],
        },
      ];
      this.showBase = false;
      this.$refs.orderRef.resetForm();
      this.$refs.orderRef.openMyCar(data, 1);
    },
    // 收藏商品
    handleTuck() {
      goodSave(this.goodsId).then((res) => {
        if (res.code == 1000) {
          this.$Notify({ type: "success", message: "收藏成功！" });
          this.getSearch();
          this.$emit("refresh");
        }
      });
    },
    handleCancel() {
      goodDelFav([this.goodsId]).then((res) => {
        if (res.code == 1000) {
          this.$Notify({ type: "success", message: "取消成功！" });
          this.getSearch();
          this.$emit("refresh");
        }
      });
    },

    // 获取规格图片信息
    queryFileInfoData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.url;
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    handleAddr(item) {
      this.address = item.address;
      this.show = false;
    },
    formReset() {
      this.showBase = false;
      this.activity = false;
      this.btnStatus = false;
      this.btnShow = false;

      this.carDishNum = 0;
      this.totalNum = 0;

      this.attrData = [];
      this.rateData = [];
      this.address = "";
      this.timer = "";
      this.txtName = "";
      this.selectedData = "";

      this.skuData = {
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [],
          // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
          list: [],
          none_sku: false, // 是否无规格商品
          hide_stock: false, // 是否隐藏剩余库存
        },
        goods_info: {
          picture: "",
        },
      };
    },

    getWeekday(startTime, endTime) {
      var start = new Date(startTime.replace(/-/g, "/")); //将-转化为/，使用new Date
      var end = new Date(endTime.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间

      if (start > dateEnd) {
        var dataTime = start;
        this.activity = true;
      } else {
        var dataTime = end;
        this.activity = false;
      }

      var dateDiff = dataTime.getTime() - dateEnd.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);

      let day = dayDiff == 0 ? "" : dayDiff + "天 ";
      let h = hours == 0 ? "" : hours + "小时 ";
      let m = minutes == 0 ? "" : minutes + "分钟 ";
      let s = seconds == 0 ? "" : seconds + "秒";

      this.timer = day + h + m + s;

      if (dateDiff <= 0) {
        clearInterval(this.minuteOut);
        this.minuteOut = null;
        this.btnStatus = true;
        this.btnShow = true;
      }
    },
  },
};
</script>

<style scoped lang="less">
.imgBox {
  width: 100%;
  height: 379px;
}
.my-swipe {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
.active {
  padding: 0 10px;
}
.titTxt {
  font-weight: 800;
}
.txtBtm {
  margin: 10px 0;
  color: #b5b5b5;
  display: flex;

  p {
    flex: 1;
  }
}
.shopTxt {
  border-top: 2px solid #c7c7cb;
  height: 50px;
  font-size: 14px;
  // line-height: 50px;
  padding: 0 10px;
  border-bottom: 6px solid #f0f0f0;
  display: flex;
  align-items: center;
}
.txtTop {
  font-size: 15px;
  padding: 10px 0;
}
.itemTxt {
  display: flex;
  font-weight: 600;
  padding: 10px 0;
  p {
    flex: 1;
  }
}
.bomBox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: absolute;
  background-color: #fff;
  bottom: 0px;
}
.selectTxt {
  font-size: 14px;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.txtleft {
  margin-left: 10px;
  color: #b5b5b5;
}
.iconAdd {
  font-size: 18px;
  color: red;
}
.arrtxt {
  color: #ee0a24;
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.iconRight {
  position: absolute;
  right: 0;
}

.rateaBox {
  padding-bottom: 10px;
}
.buyer-msg {
  display: flex;
  align-items: center;
  margin-top: 5px;
  font-size: 13px;
}
.buyer-msg .img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.buyer-msg .name {
  margin-left: 10px;
}
.buyer-msg .dayData {
  text-align: right;
  flex: auto;
  color: #999;
}
.item .text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 13px;
}
.item .star {
  margin: 5px 0;
  color: #999;
  font-size: 14px;
  line-height: 10px;
}
.van-popup {
  .van-header {
    height: 46px;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f9f9;
    line-height: 1;
    .left {
      position: absolute;
      top: 15px;
      left: 15px;
    }
    .middle {
      font-size: 15px;
      flex: 1;
      text-align: center;
    }
  }
  .content {
    height: calc(100% - 46px);
    overflow: auto;
    background-color: #e7e7e7;
  }
}
.active /deep/ .van-cell__left-icon {
  font-size: 20px;
  color: #ccc;
}
.txtPs {
  padding: 10px 10px 10px 15px;
  font-size: 13px;
}
.indexBox {
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  padding: 10px 16px;
  background-color: #fff;
}
</style>
